<template>
    <div id="tabbar">
        <div id="tabbar-box">
            <div class="item one" @touchstart="buyClick">立刻购买</div>
            <div class="item two" @touchstart="join">加入购物车</div>
            <div class="item shoucang">收藏</div>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import { Toast } from 'mint-ui'
export default {
    props: ["a", "aa1"],
    data: function() {
        return {
            islogin: false
        }
    },
    methods: {
        join: function() {
            // console.log(this.goodsmsg)
            var params = {
                msg: this.a,
                count: this.aa1
            }
            this.$store.dispatch("requestJion", params)
                .then(res => {
                    // console.log(res);
                    Toast({
                        message: res.data.msg,
                        position: 'middle',
                        duration: 1000
                    });
                })
        },
        buyClick: function() {
            // console.log(this.a._id);
            this.$store.dispatch("loginRequest")
                .then(res => {
                    if (res) {
                        this.islogin = true;
                        location.href = "#/goods/pay/" + this.a._id
                    } else {
                        location.href = "#/login"
                    }
                })
        }
    },
    computed: {
        ...mapState([
            "goodsmsg"
        ])
    },

}
</script>

<style scoped>
#tabbar {
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5)
}

#tabbar-box {
    width: 90vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.item {
    width: 28vw;
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
    border-radius: 3px;
}

.one {
    background-color: #f6ab00;
    color: #fff;
    text-decoration: none;
}

.two {
    background-color: #99CC33;
    color: #fff;
    text-decoration: none;
}

.shoucang {
    background-color: #fff;
    color: #666;
}
</style>